<template>
  <div class="exam-monitor-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>考试监控 - {{ examInfo.name }}</span>
          <div class="header-actions">
            <el-tag type="success">进行中</el-tag>
            <el-button type="danger" @click="handleEndExam">结束考试</el-button>
          </div>
        </div>
      </template>

      <!-- 考试概况 -->
      <el-row :gutter="20" class="monitor-stats">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="stats-header">应考人数</div>
            </template>
            <div class="stats-value">{{ stats.totalStudents }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="stats-header">实际参考</div>
            </template>
            <div class="stats-value">{{ stats.attendedStudents }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="stats-header">已交卷</div>
            </template>
            <div class="stats-value">{{ stats.submittedCount }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="stats-header">剩余时间</div>
            </template>
            <div class="stats-value countdown">{{ formatTime(remainingTime) }}</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 考生状态列表 -->
      <div class="student-list">
        <el-table :data="studentList" style="width: 100%">
          <el-table-column prop="studentId" label="学号" width="120" />
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ statusMap[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="loginTime" label="登录时间" width="180" />
          <el-table-column prop="ipAddress" label="IP地址" width="140" />
          <el-table-column prop="submitTime" label="交卷时间" width="180" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                v-if="scope.row.status === 'inProgress'"
                type="warning"
                size="small"
                @click="handleForceSubmit(scope.row)"
              >
                强制交卷
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDisqualify(scope.row)"
              >
                取消资格
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 异常行为记录 -->
      <div class="violation-records">
        <h3>异常行为记录</h3>
        <el-timeline>
          <el-timeline-item
            v-for="record in violationRecords"
            :key="record.id"
            :timestamp="record.time"
            :type="record.type"
          >
            <div class="violation-content">
              <span class="student-info">
                {{ record.studentName }}（{{ record.studentId }}）
              </span>
              <span class="violation-type">{{ record.description }}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()

// 考试信息
const examInfo = reactive({
  id: route.params.id,
  name: 'C语言期中考试'
})

// 状态映射
const statusMap = {
  notStarted: '未开始',
  inProgress: '考试中',
  submitted: '已交卷',
  disqualified: '已取消资格'
}

// 统计数据
const stats = reactive({
  totalStudents: 120,
  attendedStudents: 118,
  submittedCount: 50
})

// 剩余时间（秒）
const remainingTime = ref(3600)
const timer = setInterval(() => {
  if (remainingTime.value > 0) {
    remainingTime.value--
  }
}, 1000)

onUnmounted(() => {
  clearInterval(timer)
})

// 考生列表
const studentList = ref([
  {
    studentId: '2024001',
    name: '张三',
    status: 'inProgress',
    loginTime: '2024-04-01 14:00:00',
    ipAddress: '192.168.1.100',
    submitTime: ''
  },
  {
    studentId: '2024002',
    name: '李四',
    status: 'submitted',
    loginTime: '2024-04-01 14:00:00',
    ipAddress: '192.168.1.101',
    submitTime: '2024-04-01 15:30:00'
  }
])

// 异常记录
const violationRecords = ref([
  {
    id: 1,
    studentId: '2024001',
    studentName: '张三',
    time: '2024-04-01 14:30:00',
    type: 'warning',
    description: '切换窗口3次'
  },
  {
    id: 2,
    studentId: '2024003',
    studentName: '王五',
    time: '2024-04-01 14:35:00',
    type: 'danger',
    description: '检测到第二屏幕'
  }
])

const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const remainingSeconds = seconds % 60
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

const getStatusType = (status) => {
  const typeMap = {
    notStarted: 'info',
    inProgress: 'warning',
    submitted: 'success',
    disqualified: 'danger'
  }
  return typeMap[status]
}

const handleEndExam = () => {
  ElMessageBox.confirm(
    '确定要结束考试吗？所有未交卷的考生将被强制交卷。',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实现结束考试逻辑
    ElMessage.success('考试已结束')
  }).catch(() => {})
}

const handleForceSubmit = (student) => {
  ElMessageBox.confirm(
    `确定要强制${student.name}交卷吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实现强制交卷逻辑
    ElMessage.success('已强制交卷')
  }).catch(() => {})
}

const handleDisqualify = (student) => {
  ElMessageBox.confirm(
    `确定要取消${student.name}的考试资格吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实现取消资格逻辑
    ElMessage.success('已取消考试资格')
  }).catch(() => {})
}
</script>

<style scoped>
.exam-monitor-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.monitor-stats {
  margin-bottom: 30px;
}

.stats-header {
  text-align: center;
  font-size: 16px;
}

.stats-value {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stats-value.countdown {
  color: #E6A23C;
}

.student-list {
  margin-bottom: 30px;
}

.violation-records {
  margin-top: 30px;
}

.violation-records h3 {
  margin-bottom: 20px;
}

.violation-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.student-info {
  font-weight: bold;
}

.violation-type {
  color: #F56C6C;
}
</style> 